<template>
  <div class="screen-container">
    <div ref="screenRef" class="screen-wrapper">
      <div class="screen-wrapper-header">
        <Header />
      </div>
      <div class="screen-wrapper-body">
        <div class="screen-wrapper-body-left">
          <Left />
        </div>
        <div class="screen-wrapper-body-center">
          <Center />
        </div>
        <div class="screen-wrapper-body-right">
          <Right />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useResize } from "@/composables/useResize";
import Header from "@/views/screen/components/header/index.vue";
import Left from "@/views/screen/components/body/left/index.vue";
import Center from "@/views/screen/components/body/center/index.vue";
import Right from "@/views/screen/components/body/right/index.vue";

const { screenRef } = useResize({ fullScreen: false });
</script>
<style scoped lang="scss">
.screen-container {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  background-size: 100%;
}

.screen-wrapper {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.8s;
  width: var(--ds-screen-width);
  height: var(--ds-screen-height);
  position: relative;
  transform-origin: 0 0;
  overflow: hidden;
  color: var(--ds-screen-text-color);
  background-color: var(--ds-screen-background-color);

  &-header {
    height: var(--ds-screen-header-height);
    width: 100%;
    line-height: var(--ds-screen-header-height);
    background-color: var(--ds-screen-header-color);
  }

  &-body {
    display: flex;
    height: 100%;
    width: 100%;
    &-left {
      padding: var(--ds-screen-padding);
      width: 20%;
      height: calc(100% - var(--ds-screen-header-height));
      background-color: var(--ds-screen-leftbar-color);
    }
    &-center {
      flex: 1;
      height: calc(100% - var(--ds-screen-header-height));
      background-color: var(--ds-screen-center-color);
    }
    &-right {
      width: 20%;
      height: calc(100% - var(--ds-screen-header-height));
      background-color: var(--ds-screen-rightbar-color);
    }
  }
}
</style>
